<template>
  <div class="about">
    <div class="content" id="container"></div>
    <div id="panel"></div>
    <div class="btnbox">
      <div class="btn" @click="jump(item.value)" v-for="item in dataList" :key="item.name">{{ item.name }}</div>
    </div>
    <!-- <div>
        <div class="search-box">
   
    <input
      v-model="searchQuery"
      @input="onSearch"
      type="text"
      placeholder="请输入搜索关键词"
    />
    <button @click="onSearchClick">搜索</button>
  </div>
    </div>  -->
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import AMapLoader from "@amap/amap-jsapi-loader";
// import { log } from 'console';
window._AMapSecurityConfig = {
  securityJsCode: 'fb452a06e30eda2c0e628082b4abd772',
}
const dataList = ref([
  { name: '上海交通大学', value: [121.4336,31.0254] },
  { name: '复旦大学', value: [121.5036,31.2999] },
  { name: '同济大学', value: [121.5087,31.2765] },
  { name: '上海大学', value: [121.3958,31.3812] },
])
var map = null
var driving = null
var Amap2 = null
var searchQuery = null
const getMap = () => {
  console.log('getMap')
  // 配置高德地图的key
  AMapLoader.load({
    "key": "8cc495b3348267aaa89c4a8cd9d9ae33",
    "version": "1.4.14",
    "plugins": [
      "AMap.InfoWindow",//地图弹窗
      "AMap.PlaceSearch",//地点搜索
      "AMap.Geolocation",//定位到当前位置
      "AMap.Geocoder",//经纬度进行逆地理编码查询
      "AMap.Driving",//驾车导航
      "AMap.Transfer",//公交导航
      "AMap.Walking",//步行导航
      "AMap.Riding",//骑行导航
      "AMap.PlaceSearch",
    ]
  })
    .then((AMap) => {
      // 创建地图实例
      map = new AMap.Map('container', {
        zoom: 11, // 地图显示的缩放级别
        center: [121.4336,31.0254] // 地图中心点坐标
      });
      AMap.plugin(["AMap.PlaceSearch"], function () 
      {
      const placeSearch = new AMap.PlaceSearch({
        pageSize: 5, //单页显示结果条数
        pageIndex: 1, //页码
        city: "北京大学", //兴趣点城市
        citylimit: true, //是否强制限制在设置的城市内搜索
        map: map, //展现结果的地图实例
        panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>，结果列表将在此容器中进行展示。
        autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
         });
        placeSearch.search("北京大学"); 
       });
      // 实例化DrivingSearch
      driving = new AMap.Driving({
        map: map,
         panel: "panel"
      });
      Amap2 = AMap
    })
    .catch(e => {
      console.log(e);
    });
}
const jump = (value) => {
  // 根据起终点经纬度规划驾车导航路线
  console.log('jump', value);
  let start=[121.4336,31.0254]
  let end=value
  let tu=[121.4336,31.0254] //途径点
  driving.search(new Amap2.LngLat(start[0],start[1]), new Amap2.LngLat(end[0], end[1]),{
        waypoints:[new Amap2.LngLat(tu[0], tu[1])]
    }, function (status, result) {
    // result即是对应的驾车导航信息
    console.log(status, result);
    if (status === 'complete') {
      console.log('路线规划成功');
    } else {
      console.log('路线规划失败：' + result.info);
    }
  });
}
// const onSearchClick = ()=>{
//     console.log("btn");
   
// }
onMounted(() => {
  getMap()
})
 
</script>
<style lang="less" scoped>
@color1: blue;

.content {
  width: 100vw;
  height: 600px;
  background-color: @color1;
 
}
.search-box{
    position: absolute;
    top: 60px;
    left: 250px;
}
.btnbox {
  display: flex;
  width: 500px;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 20px;
}
 
.btn {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background-color: rgb(12, 148, 233);
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
}
#panel{
  width: 400px;
  height: 800px;
  overflow-x: auto;
  position: fixed;
  right: 20px;
  top: 20px;
  // background-color: rgb(255, 255, 255)
}
</style>